<template>
  <u-mask
    class="mask"
    :zoom="false"
    :show="props.isShow"
    :custom-style="{ height: tools.clientTopHight(), bottom: 0, top: 'auto' }"
    @click="emit('close', false)"
  >
    <view class="content flex-direction-column">
      <image mode="widthFix" class="pic" :src="props.share"></image>
      <view class="btn flex-center" @click.stop="tools.downImage(props.share)">
        <image src="/pagesA/static/image/36.png"></image>
        <text>保存图片</text>
      </view>
    </view>
  </u-mask>
</template>

<script setup lang="ts">
import tools from '@/utils/tools'
const emit = defineEmits(['close'])
const props = defineProps({
  isShow: {
    type: Boolean,
    default() {
      return false
    }
  },
  share: {
    type: String,
    default() {
      return ''
    }
  }
})
</script>

<style lang="scss" scoped>
.content {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 648rpx;
  align-items: center;
  position: absolute;
  justify-content: center;
  .pic {
    width: 100%;
  }
  .btn {
    width: 222rpx;
    height: 68rpx;
    margin-top: 48rpx;
    border-radius: 36rpx;
    background: rgba(230, 66, 94);
    image {
      width: 24rpx;
      height: 28rpx;
      margin-right: 12rpx;
    }
    text {
      color: #fff;
      font-size: 32rpx;
    }
  }
}
</style>
